<template>
  <div style="padding: 20px;">
    <div class="flex-1 flex-column" style="padding-top: 20px; background: #fff;height: 100%">
      <div class="flex-column" style="margin: 0 32px">
        <span class="detail-title">基本信息</span>
        <a-divider style="margin: 15px 0"/>
      </div>
      <m-form @submit="handleSubmit" :form="form">
        <a-row style="width: 80%;align-self: center;">
          <m-col :span="span">
            <a-form-item label="套餐名称">
              <a-input placeholder="请输入套餐名称"
                       v-decorator="['packageName', { rules: [{ required: true, message: '请输入套餐名称!' }] }]"
                       :allowClear="true"/>
            </a-form-item>
          </m-col>
          <m-col :span="span">
            <a-form-item label="套餐金额（元）">
              <a-input placeholder="请输入套餐金额"
                       v-decorator="['packageAmount', { rules: [{ required: true, message: '请输入套餐金额!' }] }]"
                       :allowClear="true"/>
            </a-form-item>
          </m-col>
          <m-col :span="span">
            <a-form-item label="套餐库存">
              <a-input placeholder="请输入套餐库存"
                       v-decorator="['packageStock', { rules: [{ required: true, message: '请输入套餐库存!' }] }]"
                       :allowClear="true"/>
            </a-form-item>
          </m-col>
          <m-col :span="span">
            <a-form-item label="套餐内容">
              <!-- <a-radio-group v-decorator="['type', {initialValue: 1, rules: [{ required: true}]}]"
                             style="width: 100%;">
                <a-radio :value="1">固定商品</a-radio>
                <a-radio :value="0">可选商品</a-radio>
              </a-radio-group> -->
              <a-select
                  mode="multiple"
                  :default-value="[]"
                  style="width: 100%"
                  placeholder="请选择"
                  v-decorator="['packageContent', { rules: [{ required: true, message: '请输入套餐内容!' }] }]"
                  @change="handleChange"
                >
                  <a-select-option v-for="item in groupList" :key="item.id">
                    {{item.groupName}}
                  </a-select-option>
                </a-select>
              
            </a-form-item>
          </m-col>
          <!-- <m-col :span="span">
            <a-form-item label="类型">
              <a-select placeholder="请选择类型" :allowClear="true"
                        v-decorator="['type', { rules: [{ required: true, message: '请选择类型!' }] }]">
                <template v-for="item in typeList">
                  <a-select-option :key="item.value" :value="item.value">
                    {{ item.label }}
                  </a-select-option>
                </template>
              </a-select>
            </a-form-item>
          </m-col>
          <m-col :span="span">
            <a-form-item label="金额（元）">
              <a-input placeholder="请输入金额"
                       v-decorator="['total', { rules: [{ required: true, message: '请输入金额!' }] }]"
                       :allowClear="true"/>
            </a-form-item>
          </m-col>
          <m-col :span="span" class="drop1">
            <a-form-item label="日期">
              <a-date-picker valueFormat="YYYY-MM-DD" placeholder="请选择日期"
                             v-decorator="['signDate', { rules: [{ required: true}]}]"
                             :allowClear="true" style="width: 100%"/>
            </a-form-item>
          </m-col>
           -->
        </a-row>
       

        <a-row style="width: 80%;align-self: center; margin-top: -15px">
          <m-form-item label="套餐备注">
            <a-textarea placeholder="请输入" v-decorator="['remark', { rules: [{ required: false}]}]"
                        :allowClear="true" :auto-size="{ minRows: 1}"/>
          </m-form-item>
        </a-row>

        <div style="height: 30px;background-color: #ECEFF3"></div>
        <div style="padding-bottom: 10px" class="flex-column">
          <div class="flex-column" style="padding: 20px 30px 0 30px">
            <span class="detail-title">图片</span>
            <a-divider style="margin: 15px 0"/>
          </div>
          <m-row style="margin-top: 10px;width: 80%;align-self: center">
            <a-form-item label="图片">
              <a-upload
                  accept=".jpg,.png,.jpeg"
                  name="imgFile"
                  list-type="picture-card"
                  :action="actionUrl"
                  :file-list="fileList"
                  @change="uploadCallback"
                  @preview="handlePreview"
                  :multiple="true"
                  :remove="handleRemove"
              >
                <div v-if="fileList&&fileList.length <12">
                  <a-icon :type="loading ? 'loading' : 'plus'"/>
                  <div>
                    点击上传
                  </div>
                </div>
              </a-upload>
            </a-form-item>
          </m-row>
          
        </div>

        <div class="flex-row-center mShadow commit-btn">
          <a-button @click="back" style="margin-right: 15px">
            取消
          </a-button>
          <a-button type="primary" html-type="submit">
            保存
          </a-button>
        </div>
      </m-form>
    </div>
    <div style="height: 100px;background-color: #ECEFF3"></div>
    <a-modal :visible="previewVisible" :footer="null" @cancel="previewVisible = false">
      <img alt="预览" style="width: 100%" :src="previewImage"/>
    </a-modal>
  </div>
</template>

<script>
export default {
  data() {
    return {
      span: 11,
      form: this.$form.createForm(this, {name: 'group'}),
      type: undefined,
      signDate: '',
      groupId: undefined,
      groupList: [{"id":1,"groupName":"分组1"},{"id":2,"groupName":"分组2"},{"id":3,"groupName":"分组3"}],
      previewVisible: false,
      previewImage: '',
      //图片上传地址
      actionUrl: '/client/xxxx',
      loading: false,
      fileList: [],
      typeList:[
          {label:'固定商品',value:1},
          {label:'可选商品',value:2}
        ],
    }
  },
  mounted() {
    this.getInfo();
  },
  methods: {
    getInfo() {
      //获取详情
      let self = this;
      if (this.$route.query.groupId) {
        this.$util.showLoading(self);
        this.groupId = this.$route.query.groupId;
        let p = {
          groupId: this.groupId
        }

        // this.$util.showLoading(this);
        // this.$util.get('xxxx', p, true).then((res) => {
        //   this.$util.hideLoading();
        //   console.log(111, res);
        //   let dao = res.content;

        //   self.form.setFieldsValue({
        //     groupName: dao.groupName,
        //     type: dao.type,
        //     remark: dao.REMARK
        //   })
        // })
      }
    },

    handleSubmit(e) {
      e.preventDefault();
      let self = this;
      this.form.validateFieldsAndScroll((err, values) => {
        if (!err) {
          // let p = values;
          // if (this.groupId) {
          //   p.groupId = this.groupId;
          // }

          // let picList = [];
          // if (self.fileList.length > 0) {
          //   //处理上传的图片
            
          // }
          // //提交接口
          // this.$util.post('xxx', p).then((res) => {
          //   console.log(res);
          //   self.back();
          // });
          self.back();
        }
      });
    },
    back() {
      this.$router.back();
    },
    uploadCallback({file, fileList}) {
      this.fileList = fileList;
    },
    async handlePreview(file) {
      if (!file.url && !file.preview) {
        file.preview = await this.$util.getBase64(file.originFileObj);
      }
      this.previewImage = file.url || file.preview;

      this.previewVisible = true;
    },
    handleRemove(file) {
      // file.status = '1';
      // let name = '';
      // if (file.response) {
      //   name = file.response.initialPreviewConfig[0].key
      // } else {
      //   name = file.name
      // }
      // //调用删除文件接口
      // this.$util.post("xxx", {key: name});
    },
  }
}
</script>

<style scoped>

</style>
